<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <span>f全部文章</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div v-if="page.total">
          <div :style="{'height': tableHeight+'px','overflow-y': 'auto'}">
            <div class="centent-two" @click="gotolist(item.id)" v-for="(item,index) in arryList" :key="index">
              <div class="centent-two-title">
                <span>文章</span>
                <p>{{ item.title }}</p>
              </div>
              <div class="centent-two-usertime">
                <span>发布人：{{ item.user.realname }}</span>
                <span>发布时间：{{ item.create_time }}</span>
              </div>
              <!--<div class="centent-two-desc">-->
              <!--伴随着三月的春风和充满希望的晨光，新疆436.79万名中小学和中职学校今天开学。上学错峰、进校排队、间隔一米、三次测温，新学期第一天，学生们除了校服、课本、书包，还有了新的配置：口罩和免洗消毒液-->
              <!--</div>-->
              <div class="centent-two-talk">
                <span class="talkSpan"><i class="iconfont iconpinglun"></i>{{ item.comment_number }}</span>
                <span class="talkSpan"><i class="iconfont iconzanpress"></i>{{ item.laud }}</span>
                <!--is_parents-->
              </div>
            </div>
          </div>
          <el-col :span="24" style="text-align: center">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :total="page.total"
                :page-size="page.pagesize"
                @current-change="handleSizeChange">
            </el-pagination>

          </el-col>
        </div>

        <p v-else style="padding:60px 0;text-align: center">版主未发布内容</p>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">返回</el-button>
      </div>
    </div>
    <forumDetail :visible.sync="detailVisible" :detailId="detailId" detailType="1" @InitFn="InitFn"></forumDetail>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import forumDetail from "./forumDetail";

export default {
  props: ['visible', 'historyId'], // commoent 学生点评 collection 学生采集
  components: {
    forumDetail
  },
  data() {
    return {
      detailVisible: false,
      dialogVisible: false,
      tableStyle: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [],
      tableHeight: 0,
      detailId: 0,
      formData: {
        p: 1,
        plate_id: '',
        title: '',
        is_examine: 1
      }
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        if (this.historyId) {
          this.formData.plate_id = this.historyId
        }
        let n = this;
        this.$nextTick(() => {
          let height = n.$refs.dialogBox.offsetHeight;  //top 50 1 search 50 page 50 10 footer 50 1
          this.tableHeight = height - (51 + 50 + 20 + 51)
        })
        this.InitFn()
      }
    }
  },
  created() {
  },
  methods: {
    async InitFn() {
      this.formData.p = this.page.pageindex
      let data = await this.$post(this.api.forum_postings_index, this.formData);
      console.log('data:', data)
      if (data.code === 0) {
        for (let i in data.list.data) {
          data.list.data[i].create_time = data.list.data[i].create_time.split(' ')[0]
        }
        this.arryList = data.list.data
        this.page.total = data.list.total
      } else {
      }
    },
    tabList() {
      //  radio1
      this.page.pageindex = 1
      this.arryList = []
      this.InitFn()
    },
    getqrcode(index) {
      this.$confirm('确定通过审核，发布该版块文章?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.checkSuccessFn(index)
      }).catch(() => {

      })
    },
    checkSuccessFn(index) {
      // 0待审核1审核2驳回 is_examine
      this.$post(api.forum_postings_adopt, {
        id: this.arryList[index].id
      }).then((response) => {
        if (response.code === 0) {
          this.InitFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    detelTearch(index) {
      this.$prompt('请填写相应的驳回理由，以便记录更改', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({value}) => {
        console.log('输入的内容：', value)
        if (!value) {
          this.$message.error('请填写相应的驳回理由')
        } else {
          this.checkFailFn(index, value)
        }
      }).catch(() => {
      })
    },
    checkFailFn(index, value) {
      // 0待审核1审核2驳回 is_examine
      this.$post(api.forum_postings_reject, {
        id: this.arryList[index].id,
        content: value
      }).then((response) => {
        if (response.code === 0) {
          this.InitFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 查看详情
    gotolist(id) {
      this.detailId = id;
      this.detailVisible = true;
      // type 1 列表进入 2 审核进入
      // this.$router.push('/forumdetail?type=2&id=' + id)
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 80%;
  height: 70%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.hearder-search {
  display: flex;
  align-items: center;
}
</style>


